<template>
	<view class="container">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">设置收款账号</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--设置收款账号start-->
		<view class="improve">
			<view class="set_acount_info">
				<view>
					<label>姓名</label>
					<text class="s_name">朱元璋</text>
				</view>
				<view>
					<label>币种</label>
					<view class="type_bz" @tap="open_choose">
						<image :src="c_img"></image>
						<text>{{c_name}}</text>
					</view>
				</view>
				<view>
					<label>收款</label>
					<view class="type_way"  @tap="open_choose_way">
						<image :src="w_img"></image>
						<text>{{w_name}}</text>
					</view>
				</view>
			</view>
			
			<view class="code_form">
				<view class="t_input">
					<label>{{w_name}}账号</label>
					<u-input type="text" placeholder="请输入账号" value="" placeholderStyle="color: #C9CACA"  v-model="cusname"></u-input>
					<image src="/static/images/img_07.png" class="tel_close"  v-if="cusname.length>0" @click="cusname=''"></image>
				</view>
				<view class="t_input" v-show="bank_input">
					<label>开户行</label>
					<u-input type="text" placeholder="请输入开户行" value="" placeholderStyle="color: #C9CACA"  v-model="cusname_bank"></u-input>
					<image src="/static/images/img_07.png" class="tel_close"  v-if="cusname_bank.length>0" @click="cusname_bank=''"></image>
				</view>
			</view>
			<view class="code_form set_acount_img"  v-show="code_img">
				<view class="t_input">
					<label>收款二维码</label>
					<view class="img_list">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"  multiple :maxCount="1"></u-upload>
					</view>
				</view>
			</view>
			
			
			<view class="yanz_form">
				<view class="tels"><text>短信验证</text>138*****899</view>
				<view class="input_code">
					<u-input placeholder="输入验证码" placeholderStyle="color: #C9CACA" v-model="cusname_code" @focus="keyboard_show = true"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
					<u-button @tap="getCode">{{tips}}</u-button>	
				</view>	
			</view>
			
			
		</view>
		<!--设置收款账号end-->
		
		<!--底部start-->
		<view class="f_btn">
			<button class="submit on">保存</button>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<!--底部end-->
		
		<!--弹窗start-->
		<u-popup :show="way_show" :closeOnClickOverlay="true" @close="choose_way_close">
			<view class="choose_way">
				<view class="tit">收款账户<image src="/static/images/img_31.png" mode="widthFix"  @tap="choose_way_close"></image></view>
				<view class="list">
					<view v-for="(item,index) in items" :key="index" :class="{active:count == index}" @click="change(index,item)">
						<image :src="item.url"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="tel_show" :closeOnClickOverlay="true" @close="choose_popup_close">
			<view class="choose choose01">
				<view class="tit">交易币种<image src="/static/images/img_31.png" mode="widthFix"  @tap="choose_popup_close"></image></view>
				<text class="c_tips">您所在的国家目前暂时仅支持CNY交易</text>
				<view class="list">
					<view class="active">
						<image src="/static/images/img_03.png"></image>
						<text>CNY</text>
					</view>
					<view>
						<image src="/static/images/img_04.png"></image>
						<text>USD</text>
					</view>
					<view>
						<image src="/static/images/img_05.png"></image>
						<text>INR</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!--弹窗end-->
		
		<!--键盘start-->
		<u-keyboard mode="number" ref="uKeyboard" @change="valChange" @backspace="backspace" :tooltip="tooltip" :dotDisabled="true" :show="keyboard_show" :closeOnClickOverlay="true" @close="key_close"></u-keyboard>
		<!--键盘end-->
		
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tips: '',
				// refCode: null,
				cusname_code:'',
				keyboard_show: false,
				tooltip:false,
				seconds: 60,
				cusname:"1801566558",
				w_img:'/static/images/img_73.png',
				w_name:'银行卡',
				way_show:false,
				count: "",
				items: [
					{
						url:'/static/images/img_73.png',
						name:"银行卡"
					},
					{
						url:'/static/images/img_74.png',
						name:"支付宝"
					},
					{
						url:'/static/images/img_75.png',
						name:"微信"
					}
				],
				c_img:"/static/images/img_03.png",
				c_name:"CNY",
				tel_show:false,
				fileList1: [],
				cusname_bank:"中国农行",
				bank_input:true,
				code_img:false
			}
		},
		methods:{
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			open_choose_way(){
				this.way_show = true
			},
			change(e,item) {
			    this.count = e,
				this.way_show = false,
				this.w_name = item.name,
				this.w_img = item.url
				if(this.w_name == "银行卡"){
					this.bank_input = true,
					this.code_img = false
				}else{
					this.bank_input =false,
					this.code_img = true
				}
			},
			choose_way_close(){
				this.way_show = false
			},
			valChange(val) {
				this.cusname_code += val;
			},
			backspace(){
				if(this.cusname_code.length) this.cusname_code = this.cusname_code.substr(0, this.cusname_code.length - 1);
			},
			key_close(){
				this.keyboard_show =false
			},
			open_choose(){
				this.tel_show = true
			},
			choose_popup_close(){
				this.tel_show = false
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("../member/member.scss");
	@import url("my.scss");
</style>